import React from 'react';
import { hashHistory } from 'react-router';
import { Breadcrumb, DatePicker, Input, Button, Table, Pagination, message, Row, Col, Form, Modal, } from 'antd';
import $ from 'jquery';
import Config from '../../common/config';
import moment from 'moment';
const { MonthPicker, RangePicker } = DatePicker;
const now = () => {
    return moment().format('YYYY-MM-DD HH:mm:ss')
};

const config = new Config();

export default class ActivityManage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activityList: [],//活动列表
            activitycount: 0,//活动列表条数
            pageindex: 1,//当前页码
            visible: false,//新增活动模态框显示与隐藏标志
            activity_name: '',
            activity_star: '',
            activity_end: '',
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        this.getActivityList(1);
    }
    //获取活动列表
    getActivityList(pageindex) {
        let url = `${config.wechat}/activitymanage/findManageList`;
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                pagesize: 20,
                pageindex,
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    for (let index = 0; index < data.rows.length; index++) {
                        data.rows[index].activity_end = moment(data.rows[index].activity_end).format('YYYY-MM-DD');
                        data.rows[index].activity_star = moment(data.rows[index].activity_star).format('YYYY-MM-DD');
                        data.rows[index].createdate = moment(data.rows[index].createdate).format('YYYY-MM-DD');
                    }
                    this.setState({
                        activityList: data.rows,
                        activitycount: data.count,
                    }, () => {

                    })
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //分页
    changePage(pageindex) {
        this.setState({
            pageindex
        });
        this.getActivityList(pageindex, );
    }

    //日期筛选方法
    changeDate(date, dateStr) {
        this.setState({
            dateStr,
            date,
        });
    }
    //添加活动
    addactivity() {

    }
    //查看详情
    look(record) {
        hashHistory.push({
            pathname: '/activityManagedetails',
            state: record.uuid
        })
    }
    //编辑
    Activitiesedit(record) {
        this.editActivity(record);//修改活动
    };
    //修改活动
    editActivity(record) {
        let activity_name = record.activity_name;
        let activity_star = record.activity_star;
        let activity_end = record.activity_end;
        let uuid = record.uuid;
        let url = `${config.wechat}/activitymanage/editoractivity`;
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                uuid,
                activity_name,
                activity_star,
                activity_end,
                editordate: JSON.stringify({
                    activity_name,
                    activity_star,
                    activity_end,
                })
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    message.success("修改成功!")
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    }
    //取消，关闭对话框
    handleCancel() {
        this.setState({
            visible: false,
        });
    }

    //保存
    saveBanner() {
        let activity_name = this.state.activity_name;
        let activity_star = this.state.activity_star;
        let activity_end = this.state.activity_end;
        let url = `${config.wechat}/activitymanage/addactivity`;
        $.ajax({
            url: url,
            type: "POST",
            async: true,
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                activity_name,
                activity_star,
                activity_end
            },
            success: data => {
                console.log(data);
                if (data.code === 200) {
                    message.success("新增活动成功!")
                    this.setState({
                        visible: false,
                        activity_name: '',
                        activity_star: '',
                        activity_end: ''
                    });

                    this.getActivityList();
                } else {
                    message.error(`${data.mes} 请返回重新操作`, 2);
                }
            }
        });
    };
    //活动名称
    Inputname(e) {
        this.setState({
            activity_name: e.target.value
        })
    }
    //活动开始时间
    onChange(value, dateString) {
        this.setState({
            activity_star: dateString
        })
    }
    //活动结束时间
    onChange2(value, dateString) {
        this.setState({
            activity_end: dateString
        })
    }
    //活动开始时间
    onOk(value) {
        this.setState({
            activity_star: value.format("YYYY-MM-DD HH:mm:ss")
        })
    }
    //活动结束时间
    onOk2(value) {
        this.setState({
            activity_end: value.format("YYYY-MM-DD HH:mm:ss")
        })
    }
    render() {
        const columns = [
            {
                title: '活动ID',
                dataIndex: 'id',
                width: 100,
            },
            {
                title: '活动名',
                dataIndex: 'activity_name',
                width: 100,
            },
           
            {
                title: '开始时间',
                dataIndex: 'activity_star',
                width: 100,
            }, {
                title: '结束时间',
                dataIndex: 'activity_end',
                width: 100
            }, {
                title: '获奖人',
                dataIndex: 'activity_prize',
                width: 100
            }, {
                title: '状态',
                dataIndex: 'activity_state',
                width: 100,
                render: text => <span>{text === 0 ? '待开始' : text === 1 ? '进行中' : text === 2 ? '结束' : ''}</span>
            }, {
                title: '创建时间',
                dataIndex: 'createdate',
                width: 100
            }, {
                title: '操作',
                width: 100,
                render: (text, record) => (
                    <div>
                        <Button type="primary" style={{ marginRight: '15px' }} onClick={this.look.bind(this, record)}>编辑</Button>
                        <Button type="primary" onClick={this.look.bind(this, record)}>详情</Button>
                    </div>
                )
            }
        ];
        return (
            <div className='goods-label clearfix'>
                {/*面包屑*/}
                < Breadcrumb separator=">" >
                    <Breadcrumb.Item>微信管理</Breadcrumb.Item>
                    <Breadcrumb.Item>脂玫乐小程序</Breadcrumb.Item>
                    <Breadcrumb.Item>活动管理</Breadcrumb.Item>
                </Breadcrumb >
                <Row>
                    <Col span={2} offset={22}><Button type="primary" onClick={() => { this.setState({ visible: true }) }}>新增活动</Button> </Col>
                </Row>
                <div className="clearfix dataManage">
                    <div className='allgoods-table clearfix' style={{ marginTop: '40px' }}>
                        <Table
                            rowKey="id"
                            columns={columns}
                            dataSource={this.state.activityList}
                            pagination={false}
                            bordered
                        />
                    </div>
                </div>
                <div className='goods-label-let'>
                    <div className="floor-ppagi">
                        {
                            this.state.activitycount === 0 ?
                                <p className="floor-ppagip">
                                    共{this.state.activitycount}条记录
                                </p> :
                                <p className="floor-ppagip">
                                    当前显示
                                    {15 * (this.state.pageindex - 1) + 1}—
                                    {15 * this.state.pageindex < this.state.activitycount ? 15 * this.state.pageindex : this.state.activitycount}条记录，
                                    共{this.state.activitycount}条记录
                                </p>
                        }
                        <Pagination showQuickJumper current={this.state.pageindex} total={this.state.activitycount || 1} defaultPageSize={20} onChange={this.changePage.bind(this)} />
                    </div>
                </div>
                {/* 新增活动模态框 */}
                <Modal visible={this.state.visible}
                       className="add-new-activity"
                    title={<p style={{ textAlign: "center" }}>新增打卡活动</p>}
                    okText="确定"
                    cancelText="取消"
                    footer={<div>
                        <Button onClick={this.handleCancel.bind(this)}>取消</Button>
                        <Button type="primary" onClick={this.saveBanner.bind(this)}>确定</Button>
                    </div>}
                    onCancel={this.handleCancel.bind(this)}
                    maskClosable={false}
                >
                    <div className='addactivity'>
                        <span>活动名称:&nbsp;&nbsp;&nbsp;</span>
                        <Input
                            placeholder="请输入活动名称:"
                            maxLength="25"
                            style={{ width: '154px' }}
                            onBlur={this.Inputname.bind(this)}
                        /><br />
                        <span>开始时间:&nbsp;&nbsp;&nbsp;</span>
                        <DatePicker
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="开始时间:"
                            onChange={this.onChange.bind(this)}
                            onOk={this.onOk.bind(this)}
                        /><br />
                        <span></span>
                        <span>结束时间:&nbsp;&nbsp;&nbsp;</span>
                        <DatePicker
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            placeholder="开始时间:"
                            onChange={this.onChange2.bind(this)}
                            onOk={this.onOk2.bind(this)}
                        />
                    </div>
                </Modal>
            </div>
        )
    }
}

